AngularJS Filters

தரவை வடிவமைக்க AngularJS பில்டர்கள்

AngularJS பில்டர்கள்

தரவை வடிவமைக்க AngularJS இல் பில்டர்களைச் சேர்க்கலாம்.

AngularJS தரவை மாற்ற பில்டர்களை வழங்குகிறது:

பில்டர் விளக்கம் பயன்பாடு
currency ஒரு எண்ணை நாணய வடிவத்தில் வடிவமைக்கிறது {{ price | currency }}
date ஒரு தேதியை குறிப்பிட்ட வடிவத்தில் வடிவமைக்கிறது {{ today | date:'yyyy-MM-dd' }}
filter வரிசையிலிருந்து உருப்படிகளின் துணைக்குழுவைத் தேர்ந்தெடுக்கிறது items | filter:'search'
json ஒரு பொருளை JSON சரமாக வடிவமைக்கிறது {{ obj | json }}
limitTo வரிசை/சரத்தை குறிப்பிட்ட எண்ணிக்கையிலான உறுப்புகள்/எழுத்துக்களாக மட்டுப்படுத்துகிறது {{ text | limitTo:10 }}
lowercase சரத்தை சிற்றெழுத்தில் வடிவமைக்கிறது {{ name | lowercase }}
number ஒரு எண்ணை சரமாக வடிவமைக்கிறது {{ count | number }}
orderBy ஒரு வெளிப்பாட்டின் மூலம் வரிசையை வரிசைப்படுத்துகிறது items | orderBy:'name'
uppercase சரத்தை பெரிய எழுத்தில் வடிவமைக்கிறது {{ name | uppercase }}

வெளிப்பாடுகளில் பில்டர்களைச் சேர்த்தல்

பைப் கேரக்டர் | பயன்படுத்தி, அதைத் தொடர்ந்து ஒரு பில்டர், வெளிப்பாடுகளில் பில்டர்களைச் சேர்க்கலாம்.

uppercase பில்டர்

<div ng-app="myApp" ng-controller="personCtrl">
    <p>The name is {{ lastName | uppercase }}</p>
</div>

lowercase பில்டர்

<div ng-app="myApp" ng-controller="personCtrl">
    <p>The name is {{ lastName | lowercase }}</p>
</div>

டைரக்டிவ்களில் பில்டர்களைச் சேர்த்தல்

பைப் கேரக்டர் | பயன்படுத்தி, அதைத் தொடர்ந்து ஒரு பில்டர், ng-repeat போன்ற டைரக்டிவ்களில் பில்டர்கள் சேர்க்கப்படுகின்றன:

எடுத்துக்காட்டு

orderBy பில்டர் ஒரு வரிசையை வரிசைப்படுத்துகிறது:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names | orderBy:'country'">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>
</div>

currency பில்டர்

currency பில்டர் ஒரு எண்ணை நாணயமாக வடிவமைக்கிறது:

எடுத்துக்காட்டு

<div ng-app="myApp" ng-controller="costCtrl">
    <h1>Price: {{ price | currency }}</h1>
</div>

currency பில்டர் விருப்பங்கள்:

currency பில்டருக்கு கூடுதல் விருப்பங்களைக் குறிப்பிடலாம்: {{ price | currency:"₹":0 }} - இது இந்திய ரூபாயாக ₹ குறியீட்டுடன் தசமங்கள் இல்லாமல் காட்டும்.

filter பில்டர்

filter பில்டர் ஒரு வரிசையின் துணைக்குழுவைத் தேர்ந்தெடுக்கிறது.

filter பில்டர் வரிசைகளில் மட்டுமே பயன்படுத்தப்படலாம், மேலும் பொருந்தக்கூடிய உருப்படிகளை மட்டுமே கொண்ட வரிசையை இது திருப்பித் தரும்.

எடுத்துக்காட்டு

"i" என்ற எழுத்தைக் கொண்ட பெயர்களைத் திருப்பித் தரவும்:

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names | filter : 'i'">
            {{ x }}
        </li>
    </ul>
</div>

பயனர் உள்ளீட்டின் அடிப்படையில் வரிசையை வடிகட்டுதல்

ஒரு உள்ளீட்டுப் புலத்தில் ng-model டைரக்டிவை அமைப்பதன் மூலம், பில்டரில் உள்ளீட்டுப் புலத்தின் மதிப்பை ஒரு வெளிப்பாடாகப் பயன்படுத்தலாம்.

உள்ளீட்டுப் புலத்தில் ஒரு எழுத்தைத் தட்டச்சு செய்யவும், பொருத்தத்தைப் பொறுத்து பட்டியல் சுருங்கும்/வளரும்:

<div ng-app="myApp" ng-controller="namesCtrl">
    <p><input type="text" ng-model="test"></p>
    <ul>
        <li ng-repeat="x in names | filter : test">
            {{ x }}
        </li>
    </ul>
</div>

உண்மையான நேர தேடல்:

filter பில்டர் ng-model உடன் இணைந்து உண்மையான நேர தேடல் செயல்பாட்டை வழங்குகிறது. பயனர் தட்டச்சு செய்யும் போதே பட்டியல் தானாகவே புதுப்பிக்கப்படுகிறது.

பயனர் உள்ளீட்டின் அடிப்படையில் வரிசையை வரிசைப்படுத்துதல்

அட்டவணை தலைப்புகளில் கிளிக் செய்து வரிசைப்படுத்தும் வரிசையை மாற்றவும்:

HTML:

<div ng-app="myApp" ng-controller="namesCtrl">
    <table border="1" width="100%">
        <tr>
            <th ng-click="orderByMe('name')">Name</th>
            <th ng-click="orderByMe('country')">Country</th>
        </tr>
        <tr ng-repeat="x in names | orderBy:myOrderBy">
            <td>{{x.name}}</td>
            <td>{{x.country}}</td>
        </tr>
    </table>
</div>

JavaScript:

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
    ];
    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>

தனிப்பயன் பில்டர்கள்

உங்கள் மாட்யூலுடன் ஒரு புதிய பில்டர் தொழிற்சாலை செயல்பாட்டைப் பதிவு செய்வதன் மூலம் உங்கள் சொந்த பில்டர்களை உருவாக்கலாம்:

எடுத்துக்காட்டு

"myFormat" என்ற தனிப்பயன் பில்டரை உருவாக்கவும்:

HTML:

<ul ng-app="myApp" ng-controller="namesCtrl">
    <li ng-repeat="x in names">
        {{x | myFormat}}
    </li>
</ul>

JavaScript:

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

myFormat பில்டர் ஒவ்வொரு இரண்டாவது எழுத்தையும் பெரிய எழுத்தாக வடிவமைக்கும்.

பயிற்சிகள் மூலம் கற்றல்

பில்டர்களை வெளிப்பாடுகளில் எப்படிச் சேர்க்கிறீர்கள்?

பைப் சின்னத்தைப் பயன்படுத்தி (|)
✓ சரி! பில்டர்கள் பைப் சின்னத்தைப் பயன்படுத்தி சேர்க்கப்படுகின்றன
கமாவைப் பயன்படுத்தி (,)
✗ தவறு! பில்டர்கள் கமாவுடன் சேர்க்கப்படுவதில்லை
கூட்டல் சின்னத்தைப் பயன்படுத்தி (+)
✗ தவறு! பில்டர்கள் கூட்டல் சின்னத்துடன் சேர்க்கப்படுவதில்லை
கழித்தல் சின்னத்தைப் பயன்படுத்தி (-)
✗ தவறு! பில்டர்கள் கழித்தல் சின்னத்துடன் சேர்க்கப்படுவதில்லை

பல பில்டர்கள்

நீங்கள் பல பில்டர்களை ஒன்றன் பின் ஒன்றாகப் பயன்படுத்தலாம்:

எடுத்துக்காட்டு

<div ng-app="myApp" ng-controller="personCtrl">
    <p>Name: {{ name | uppercase | limitTo:5 }}</p>
    <p>Price: {{ price | currency:"₹":0 | lowercase }}</p>
    <p>Date: {{ today | date:'fullDate' | uppercase }}</p>
</div>

பில்டர் வரிசை முக்கியம்:

பில்டர்கள் இடமிருந்து வலமாக செயல்படுத்தப்படுகின்றன. பில்டர்களின் வரிசை வெளியீட்டை கணிசமாக பாதிக்கும். எப்போதும் பில்டர்களை சரியான வரிசையில் பயன்படுத்துங்கள்.

பில்டர் பாராமீட்டர்கள்

பல பில்டர்கள் கூடுதல் பாராமீட்டர்களை ஏற்கின்றன:

பில்டர் பாராமீட்டர்கள் எடுத்துக்காட்டு
date தேதி வடிவம் {{ today | date:'yyyy-MM-dd' }}
currency நாணய குறியீடு, தசம இலக்கங்கள் {{ price | currency:"₹":2 }}
limitTo வரம்பு எண் {{ text | limitTo:20 }}
number தசம இலக்கங்கள் {{ value | number:2 }}